{extend name="$_admin_base_layout" /}

{block name="plugins-css"}
<link href="__LIBS__/jquery-nestable/jquery.nestable.css" rel="stylesheet" type="text/css" />
{/block}
{block name="content"}
<div class="row">
    <div class="col-md-12">
        <div class="block">
            <ul class="nav nav-tabs">
                <li  class="active" >
                    <a href='javascript:;'>节点权限管理</a>
                </li>
            </ul>
            <div class="block-content tab-content">
                <div class="tab-pane active">
                    <div class="row data-table-toolbar">
                        <div class="col-sm-12">
                            <form action="{$Request.url}" method="get">
                                <div class="toolbar-btn-action">
                                    <a title="新增" class="btn btn-primary" href="{:url('add', ['module' => $Request.param.group])}"><i class="fa fa-plus-circle"></i> 新增</a>
                                    <button title="展开所有节点" type="button" class="btn btn-success" id="expand-all"><i class="fa fa-plus"></i> 展开所有节点</button>
                                    <button title="收起所有节点" type="button" class="btn btn-warning" id="collapse-all"><i class="fa fa-minus"></i> 收起所有节点</button>
                                </div>
                            </form>
                        </div>
                    </div>
                    {notempty name="menus"}
                        <div class="dd" id="menu_list">
                            <ol class="dd-list">{$menus|raw}</ol>
                        </div>
                    {/notempty}
                </div>
            </div>
        </div>
    </div>
</div>
{/block}

{block name="script"}
<script src="__LIBS__/jquery-nestable/jquery.nestable.js"></script>
<script src="__LIBS__/jquery-ui/jquery-ui.min.js"></script>
<script>
    $(document).ready(function(){
        // 模块拖拽
        $( "#sortable" ).sortable({
            connectWith: ".connectedSortable"
        }).disableSelection();

        // 初始化节点拖拽
        $('#menu_list').nestable({maxDepth:4}).on('change', function(){
            $('#save').removeAttr("disabled").removeClass('btn-default disabled').addClass('btn-success');
        });

        // 隐藏禁用节点
        $('#hide_disable').click(function(){
            $('.dd-disable').hide();
        });

        // 显示禁用节点
        $('#show_disable').click(function(){
            $('.dd-disable').show();
        });

        // 展开所有节点
        $('#expand-all').click(function(){
            $('#menu_list').nestable('expandAll');
        });

        // 收起所有节点
        $('#collapse-all').click(function(){
            $('#menu_list').nestable('collapseAll');
        });
    });
</script>
{/block}